<template>
	<view class="home_header">
		<view class="header_wrapper">
			<view class="header_wrap">
				<view class="header_title row between">
					<image src="@/static/home/header-title.png" mode=""></image>
					<view class="row switch">
						<text @click.srop="handleLocale">{{locale=='en'?'عربي':'English'}}</text>
					<image src="@/static/home/arrow_up.png" mode=""></image>
					</view>
				</view>
				<view class="search">
					<view class="search_left">
						<image src="@/static/home/search.png"></image>
						<input v-model="keyword" type="text" placeholder="search" />
					</view>
					<view class="search_right flex-center" @click.stop="handleSearch">Search</view>
				</view>
			</view>
		</view>
	   
		<!-- <view class="home_filter">
		    <view class="home_nav">
		    	<ul class="row">
					<li :class="navIndex == 0 ? 'active active0' : ''" @click.stop="handleNav(0)">
						<p>{{$t('short.stay')}}</p>
						<span></span>
					</li>
					<li  :class="navIndex == 1 ? 'active active1' : ''" @click.stop="handleNav(1)">
						<p>{{$t('rent')}}</p>
						<span></span>
					</li>
				</ul>
		    </view>
			<view class="filter_wrap">
				<view class="filter_choose row between" @click.stop="handleLocation">
					<p>{{area_name||$t('select.city')}}</p>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
				<uni-data-select :clear="false" v-model="houseType" :localdata="houseItems"
					placeholder="Select House type"></uni-data-select>
				<view class="filter_price row between">
					<view class="filter_search">
						<input v-model="priceMin" type="text" placeholder="customize the lowest price" />
					</view>
					<text>-</text>
					<view class="filter_search">
						<input v-model="priceMax" type="text" placeholder="customize maximum price" />
					</view>
				</view>
				<view class="filter_time">
					<view class="time">
						<p>{{ $t('check.in') }}</p>
						<text @click.stop="isCalendar=true">{{start_time?start_time: $t('check.in')}}</text>
					</view>
					<view class="time">
						<p>{{ $t('check.out') }}</p>
						<text @click.stop="isCalendar=true">{{end_time?end_time: $t('check.out')}}</text>
					</view>
					<view class="time">
						<p></p>
						<text>{{nights}} nights in total</text>
					</view>
				</view>
				<view class="filter_ul">
					<ul>
						<li class="row between">
							<view class="filter_left row">
								<image src="@/static/home/icon_num.png" mode=""></image>
								<view class="row"><text
										@click.stop="handlePeople">{{people_num?people_num+$t('text.people'):'Number of people '}}</text>
									/ <text @click.stop="handleBeds">{{bed_num?bed_num+$t('text.beds'):'Number of beds'}}</text>
								</view>
							</view>
							<u-icon name="arrow-right" size="14"></u-icon>
						</li>
						<li class="row between filter_search">
							<view class="filter_left row">
								<iconfont size="36rpx" color="#b3b3b3" name="icon-search"></iconfont>
								<input v-model="keyword" type="text" placeholder="Location/subway" />
							</view>
							<u-icon name="close" size="14" v-if="keyword" @click.stop="handleClose"></u-icon>
						</li>
					</ul>
				</view>
				<button @click.stop="handleSearch">{{$t('text.search')}}</button>
			</view>
		</view> -->
		<u-calendar :show="isCalendar" title="Date selection" startText="Check-in" endText="Check Out"
			:confirmText="$t('submit.submitButton')" mode="range" @close="onCloseCalendar" @confirm="handleCalendar"></u-calendar>
		<u-picker :show="isPopup" ref="uPicker" :columns="columns" :cancelText="$t('text.cancel')" :confirmText="$t('text.confirm')"
			@cancel="handleCancel" @confirm="handleConfirm" @change="changeHandler"></u-picker>
		<u-picker :show="isPeople" :columns="people" @cancel="cancelPeople" :cancelText="$t('text.cancel')" :confirmText="$t('text.confirm')"
			@confirm="confirmPeople"></u-picker>
		<u-picker :show="isBeds" :columns="beds" @cancel="cancelBeds" :cancelText="$t('text.cancel')" :confirmText="$t('text.confirm')"
			@confirm="confirmBeds"></u-picker>
	</view>
</template>
<script>
	import {getArea,getAllArea} from '@/lib/service';
	import { mapGetters } from 'vuex';
	export default {
		name: 'homeHeader',
		data() {
			return {
				keyword: "",
				priceMin: "",
				priceMax: "",
				isPopup: false,
				country: [],
				city: [],
				region: [],
				columns: [],
				cityIndex:0,
				navIndex:0,
				countryIndex:0,
				regionIndex:0,
				houseType: '',
				countryId: "", //国家id
				cityId: "", //城市id
				regionId: "", //地区id
				area_name: "",
				start_time: "",
				end_time: "",
				isPeople: false,
				isBeds: false,
				nights: 0,
				people_num: '1',
				bed_num: '1',
				isCalendar: false,
				people: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
				],
				beds: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
				]
			}
		},
		props: {
			locale: {
				type: String,
				default: 'en'
			},
		},
		computed: {
			...mapGetters({
				houseItems: 'houseType',
			}),
			weekPrice() {
				return this.familyPrice * (1 - this.weekDiscount / 100)
			},
			monthPrice() {
				return this.familyPrice * (1 - this.monthDiscount / 100)
			},
		},
		created() {
			this.handleAreaAll()
		},
		methods: {
			// 搜索
			handleSearch(){
				uni.navigateTo({
					url:'/pages/index/search?keyword='+this.keyword
				})
			},
			// 所有城市数据
			handleAreaAll() {
				let _this = this;
				getAllArea().then(res => {
					if (res.statusCode == 0) {
						let data = res.data.country;
						if (data.length > 0) {
							_this.country = data;
							_this.handleArea(_this.country[_this.countryIndex].city)
						}
					}
				})
			},
			handleArea(city) {
				let _this = this;
				this.city = city || [];
				if (_this.city.length > 0) {
					this.cityId = this.cityId ? this.cityId : _this.city[_this.cityIndex].id;
					_this.handleCity(_this.city[_this.cityIndex].region)
				}
				},
			handleCity(region) {
				let _this = this;
				_this.region = region || [];
				if (_this.region.length > 0) {
					_this.regionId = _this.regionId ? _this.regionId :_this.region[_this.regionIndex].id;
				}
				_this.buildTree(_this.country, _this.city, _this.region);
			},
			buildTree(country, city, region) {
				let _this = this;
				let columns = [
					[],
					[]
					// []
				];
				let array = [];
				let array1 = [];
				let array2 = [];
				country.forEach(item => {
					array.push(_this.$i18n.locale=='en'?item.name:item.name2)
				})
				city.forEach(item => {
					array1.push(_this.$i18n.locale=='en'?item.name:item.name2)
				})
				// region.forEach(item => {
				// 	array2.push(_this.$i18n.locale=='en'?item.name:item.name2)
				// })
				columns[0] = array;
				columns[1] = array1;
				// columns[2] = array2;
				this.columns = columns;

			},
			// 切换语言
			handleLocale() {
				if (this.locale == 'en') {
					this.$i18n.locale = 'ar';
				} else {
					this.$i18n.locale = 'en';
				}
				this.$store.dispatch('setLanguage', this.$i18n.locale);
				this.handleAreaAll()
				this.$emit('childEvent', {
					locale: this.$i18n.locale
				});

			},
			handleClose() {
				this.keywords = "";
			},
			handleLocation() {
				this.isPopup = true;
			},
			handleCancel(e) {
				console.log(e)
				this.isPopup = false;
			},
			handleConfirm(e) {
				this.area_name = e.value.join('-');
				this.isPopup = false;
			},
			handlePeople() {
				this.isPeople = true
			},
			handleBeds() {
				this.isBeds = true
			},
			cancelBeds() {
				this.isBeds = false;
			},
			confirmBeds(e) {
				this.bed_num = e.value[0];
				this.isBeds = false;
			},
			cancelPeople() {
				this.isPeople = false;
			},
			confirmPeople(e) {
				this.people_num = e.value[0];
				this.isPeople = false;
			},
			handleNav(index){
			 this.navIndex = index;	
			 this.$emit('search', {
			 	type: this.navIndex==0?4:1
			 });
			},
			changeHandler(e) {
				let _this = this;
				let indexs = e.indexs;
				let value = e.value;
				let countryIndex = indexs[0];
				let cityIndex = indexs[1];
				// let regionIndex = indexs[2];暂时隐藏
				if (e.columnIndex == 0 && countryIndex >= 0) {
					_this.countryIndex = countryIndex;
					this.countryId = this.country[countryIndex].id;
					_this.handleAreaAll()
				} else if (e.columnIndex == 1 && cityIndex >= 0) {
					_this.countryIndex = countryIndex;
					_this.cityIndex = cityIndex;
					_this.countryId = this.country[countryIndex].id;
					_this.cityId = _this.city[cityIndex].id;
					// _this.handleAreaAll()
				} else if (e.columnIndex == 2&& regionIndex >= 0) {
					_this.regionIndex = regionIndex;
					this.regionId = this.region[regionIndex].id;
				}
			},
			handleCalendar(e) {
				this.start_time = e[0];
				this.end_time = e[e.length - 1];
				this.nights = this.getNightsCount(this.start_time, this.end_time);
				this.isCalendar = false;
			},
			onCloseCalendar() {
				this.isCalendar = false;
			},
			getNightsCount(startDate, endDate) {
				const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
				const startTime = new Date(startDate).getTime(); // 将日期转换为毫秒数
				const endTime = new Date(endDate).getTime(); // 将日期转换为毫秒数
				return Math.round((endTime - startTime) / oneDay); // 计算并返回夜数
			},
			// handleSearch() {
			// 	this.$emit('search', {
			// 		keyword: this.keyword,
			// 		priceMin: this.priceMin,
			// 		priceMax: this.priceMax,
			// 		countryId: this.countryId,
			// 		cityId: this.cityId,
			// 		regionId: this.regionId,
			// 		sdate:this.start_time,
			// 		edate:this.end_time,
			// 		houseType:this.houseType,
			// 		type: this.navIndex==0?4:1
			// 	});
			// }
		},
	}
</script>

<style lang="scss" scoped>
	.home_header {
		width: 100%;
		position: relative;
	}

	.header_wrapper {
		width: 100%;
		height: 400rpx;
		background: url("@/static/home/header_bg.png") no-repeat;
		background-size: 100% 100%;

		.header_wrap {
			padding: 0 30rpx;

			.header_title {
				padding-top: 120rpx;
				color: #ffffff;

				>image {
					width:438rpx;
					height: 42rpx;
				}

				.switch {
					image {
						width: 22rpx;
						height: 12rpx;
					}

					text {
						font-size: 28rpx;
						margin-right: 10rpx;
						margin-top: -4rpx;
						display: inline-block;
					}
				}
			}
			.search{
				width: 694rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.search_left{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 28rpx;
						margin-right: 22rpx;
					}
				}
				.search_right{
					width: 186rpx;
					height: 84rpx;
					background: #FC721A;
					border-radius: 50rpx;
					margin-right: 6rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	// 筛选
	.home_filter {
		width: 682rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: absolute;
		left: 30rpx;
		top: 130rpx;
		.home_nav{
			ul{
				.active{
					background: #FFFFFF;
					
					span{
						display: block;
						width: 43rpx;
						height: 8rpx;
						background: #4980F7;
						border-radius: 4rpx;
						margin: 0 auto;
						margin-top: 12rpx;
					}
				}
				.active0{
					border-radius: 40rpx 40rpx 0rpx 0rpx;
				}
				.active1{
					border-radius: 0rpx 0rpx 40rpx 40rpx;
				}
				li:first-child{
					border-radius: 40rpx 0rpx 40rpx 0rpx;
				}
				li:nth-child(2){
					border-radius: 0rpx 40rpx 0rpx 40rpx;
				}
				li{
					width: 100%;
					height: 100rpx;
					text-align: center;
					margin: 0 auto;
					background: #F6F6F6;
					p{
						font-family: Microsoft YaHei UI;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						padding-top: 32rpx;
					}
				}
			}
		}

		.filter_wrap {
			padding: 20rpx 28rpx;
			padding-top: 0;

			.filter_choose {
				padding: 20rpx 0;
				border-bottom: 1px solid #F6F6F6;
				p {
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.filter_price {
				padding: 14rpx 0;
				border-bottom: 1px solid #F6F6F6;

				.filter_search {
					width: 300rpx;
					height: 58rpx;
					background: #F6F6F6;
					border-radius: 19rpx;

					input {
						height: 58rpx;
						line-height: 58rpx;
						padding: 0 22rpx;
						font-family: Microsoft YaHei UI;
						font-weight: 300;
						font-size: 20rpx;
						color: #B3B3B3;
					}

				}
			}

			.filter_time {
				padding-top:20rpx;
				display: flex;
				.time {
					margin-right: 24rpx;
					// margin-top: 10rpx;

					p {
						font-family: Microsoft YaHei UI;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					text {
						display: block;
						font-family: Microsoft YaHei UI;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;

					}
				}

				.time:last-child {
					margin-right: 0;

					text {
						font-size: 24rpx !important;
						margin-top: 30rpx;
					}
				}
			}

			.filter_ul {
				ul {
					li {
						padding: 20rpx 0;
						border-bottom: 1px solid #F6F6F6;

						.filter_left {
							image {
								width: 26rpx;
								height: 26rpx;
							}

							text {
								font-family: Microsoft YaHei UI;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								margin-left: 10rpx;
							}

						}

					}

					.filter_search {
						width: 100%;
						height: 70rpx;
						padding: 0;

						.filter_left {
							width: 85%;

							input {
								width: 90%;
								padding-left: 16rpx;
								font-family: Microsoft YaHei UI;
								font-weight: 300;
								font-size: 24rpx;
								color: #B3B3B3;
							}
						}
					}
				}
			}

			button {
				height: 90rpx;
				background: #4980F7;
				border-radius: 45rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				font-size: 32rpx;
				color: #FEFEFE;
				line-height: 90rpx;
				margin-top: 20rpx;
			}
		}

	}
</style>